<template>
  <div>
    <!-- 生产单元选择 -->
    <el-select
      v-model="currentUnitType"
      placeholder="请选择"
      style="margin:20px auto;"
      @change="loadUnitList(currentUnitType)"
    >
      <el-option
        v-for="item in unitTypeList"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 工厂表格 -->
    <el-table
      :data="unitList"
      border
      style="width: 100%;"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      v-if="currentUnitType == 0"
    >
      <el-table-column prop="ftyName" label="工厂名称"> </el-table-column>
      <el-table-column prop="ftyAddress" label="工厂地址"> </el-table-column>
      <el-table-column prop="nickName" label="工厂负责人"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editInfo(scope.row.ftyId)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="
              changeStatus({
                ftyId: scope.row.ftyId,
                status: scope.row.status == true ? 0 : 1
              })
            "
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 车间表格 -->
    <el-table
      :data="unitList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      v-if="currentUnitType == 1"
    >
      <el-table-column prop="workShopName" label="车间名称"> </el-table-column>
      <el-table-column prop="ftyName" label="所属工厂"> </el-table-column>
      <el-table-column prop="ftyAddress" label="工厂地址"> </el-table-column>
      <el-table-column prop="nickName" label="车间负责人"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editInfo(scope.row.workShopId)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="
              changeStatus({
                workShopId: scope.row.workShopId,
                status: scope.row.status == true ? 0 : 1
              })
            "
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 班组表格 -->
    <el-table
      :data="unitList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      v-if="currentUnitType == 2"
    >
      <el-table-column prop="teamName" label="班组名称"> </el-table-column>
      <el-table-column label="班组所属单元">
        <template slot-scope="scope">
          {{ scope.row.ftyName }}&nbsp;{{ scope.row.workShopName }}
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="单元负责人"> </el-table-column>
      <el-table-column label="班组成员">
        <template slot-scope="scope">
          <span
            v-for="(people, index) in scope.row.teamMemberVOList"
            :key="index"
          >
            {{ people.nickName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editInfo(scope.row.teamId)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="
              changeStatus({
                teamId: scope.row.teamId,
                status: scope.row.status == true ? 0 : 1
              })
            "
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <!-- -------------------修改工厂信息dialog---------------------- -->
    <el-dialog
      title="修改工厂信息"
      :visible.sync="dialog.updateFactoryShow"
      width="40%"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="单元名">
          <el-input
            v-model="editForm.ftyName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="单元地址">
          <el-input
            v-model="editForm.ftyAddress"
            autocomplete="off"
            placeholder="请输入单元地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="editForm.nickName"
            autocomplete="off"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>

        <el-form-item hidden>
          <el-input v-model="editForm.ftyId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateFactoryShow = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------修改车间信息dialog---------------------- -->
    <el-dialog
      title="修改工厂信息"
      :visible.sync="dialog.updateWorkshopShow"
      width="40%"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="单元名">
          <el-input
            v-model="editForm.workShopName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属单元">
          <el-input
            v-model="editForm.ftyName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="单元地址">
          <el-input
            v-model="editForm.ftyAddress"
            autocomplete="off"
            placeholder="请输入单元地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="editForm.nickName"
            autocomplete="off"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>

        <el-form-item hidden>
          <el-input v-model="editForm.workShopId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateWorkshopShow = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------修改车间信息dialog---------------------- -->
    <el-dialog
      title="修改工厂信息"
      :visible.sync="dialog.updateWorkshopShow"
      width="40%"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="单元名">
          <el-input
            v-model="editForm.workShopName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属单元">
          <el-input
            v-model="editForm.ftyName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="单元地址">
          <el-input
            v-model="editForm.ftyAddress"
            autocomplete="off"
            placeholder="请输入单元地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="editForm.nickName"
            autocomplete="off"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>

        <el-form-item hidden>
          <el-input v-model="editForm.workShopId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateWorkshopShow = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------修改班组信息dialog---------------------- -->
    <el-dialog
      title="修改工厂信息"
      :visible.sync="dialog.updateTeamShow"
      width="40%"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="单元名">
          <el-input
            v-model="editForm.teamName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属单元">
          <el-input
            v-model="editForm.workShopName"
            autocomplete="off"
            placeholder="请输入单元名"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="editForm.workNo"
            autocomplete="off"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>

        <el-form-item hidden>
          <el-input v-model="editForm.teamId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateTeamShow = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        updateFactoryShow: false,
        updateWorkshopShow: false,
        updateTeamShow: false
      },
      editForm: {},
      currentUnitType: "0",
      unitTypeList: [
        {
          value: "0",
          label: "工厂"
        },
        {
          value: "1",
          label: "车间"
        },
        {
          value: "2",
          label: "班组"
        }
      ],
      unitList: []
    };
  },
  methods: {
    changeStatus(obj) {
      obj.typeId = this.currentUnitType;
      this.$axios.put("/mesunits", obj).then(res => {
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "状态已更新",
            type: "success"
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.data.message
          });
        }
      });
    },
    loadUnitList(typeId) {
      this.$axios.get("/mesunits/" + typeId).then(res => {
        if (res.data.code == 200) {
          this.unitList = res.data.data.list;

          this.unitList.forEach(element => {
            element.status = element.status == 0 ? true : false;
          });
        }
      });
    },
    editInfo(id) {
      this.$axios
        .post("/mesunits/queryInfo", {
          typeId: this.currentUnitType,
          id: id
        })
        .then(res => {
          if (res.data.code == 200) {
            this.editForm = res.data.data.item[0];
            if (this.currentUnitType == 0) {
              this.dialog.updateFactoryShow = true;
            } else if (this.currentUnitType == 1) {
              this.dialog.updateWorkshopShow = true;
            } else {
              this.dialog.updateTeamShow = true;
            }
          }
        });
    },
    update() {
      this.editForm.typeId = this.currentUnitType;
      this.$axios.put("/mesunits", this.editForm).then(res => {
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "状态已更新",
            type: "success"
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.data.message
          });
        }
      });
      this.editForm = {};
    }
  },
  mounted() {
    this.loadUnitList(this.currentUnitType);
  }
};
</script>
